//订单管理 - 展期记录

import React, { Component } from 'react';
import { LocaleProvider, Icon, Button, Form , InputNumber, Input, DatePicker, Select, Row, Col, Table, Tag } from 'antd';
import zh_CN from 'antd/lib/locale-provider/zh_CN';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { Column } = Table;

const data = [];
for (let i = 0; i < 50; i++) {
  data.push({
    key: i,
    number: `${i+1}`,
    name: '汤娟娟',
    phone: 15256984314,
    postponeCount: '1',
    postponeDate: '2018-12-07 14:33:38',
    postponeCycle:'2018-12-14 ~ 2018-12-21',
    postponeMoney:'10.00',
    postponeServe:'200.00',
    postponeMethod:'用户展期',
    operator:'超级管理员',
    status:['成功']
  });
}

const pagination = {
	total: 50,
	className: 'pagination-position',
	showSizeChanger: true,
	showQuickJumper: true,
	showTotal: (total) => {
    return `共 ${total} 条`;
  }
}

class Extension extends Component {
  handleSubmit = (e) => {
    e.preventDefault();

    this.props.form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }

      const rangeValue = fieldsValue['range-picker'];
      const values = {
        ...fieldsValue,
        'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]
      };
      console.log('Received values of form: ', values);
    });
  }
  
  setRowClassName = (record, index) => {
    return index % 2 === 0 ? 'row-white' : 'row-grey';
  }
	
	handleSearch = () => {
		console.log(1);
	}

	render() {
		const { getFieldDecorator } = this.props.form;
		const rangeConfig = {
			rules: [{ type: 'array', required: true, message: 'Please select time!' }],
		};
		return (
      <LocaleProvider locale={zh_CN}>
        <div className="apply">
          <div>
            <div>
              <Icon type="appstore" />
              <span className="apply-font">展期记录</span>
              <div className="btn">
                <Button icon="redo" size="small">刷新</Button>
                <Button icon="delete" size="small" onClick={this.handleDelete}>清空</Button>
                <Button icon="search" size="small" type="primary" onClick={this.handleSearch}>搜索</Button>
              </div>
            </div>
          </div>   
          <div className="line"></div>
          <div className="per-info">
            <Form layout="inline" onSubmit={this.handleSubmit}>
              <Row>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator('phone', {
                      rules: [{ required: true, message: 'Please input your phone!' }],
                    })(
                      <Input placeholder="手机号" style={{ color: 'rgba(0,0,0,.25)', width: '200px' }} />
                    )}                  
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator('name', {
                      rules: [{ required: true, message: 'Please input your name!' }],
                    })(
                      <Input placeholder="姓名" style={{ color: 'rgba(0,0,0,.25)', width: '200px' }} />
                    )}                  
                  </FormItem>
                </Col>
                <Col span={4}>
                  <FormItem>
                    {getFieldDecorator('range-picker', rangeConfig)(
                        <RangePicker format="YYYY/MM/DD" style={{ color: 'rgba(0,0,0,.25)', width: '270px' }} />
                    )}
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator('minDays', {
                      rules: [{ required: true, message: 'Please input your minDays!' }],
                    })(
                      <InputNumber placeholder="最小展期次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '200px' }} />
                    )}                  
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator('maxDays', {
                      rules: [{ required: true, message: 'Please input your maxDays!' }],
                    })(
                      <InputNumber placeholder="最大展期次数" min={0} style={{ color: 'rgba(0,0,0,.25)', width: '200px' }} />
                    )}                 
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator('postponeStatus', {
                      rules: [{ required: true, message: 'Please input your postponeStatus!' }],
                    })(
                      <Select placeholder="展期状态" style={{ color: 'rgba(0,0,0,.25)', width: '200px' }}>
                        <Select.Option value="repaying">支付中</Select.Option>
                        <Select.Option value="working">处理中</Select.Option>
                        <Select.Option value="suc">成功</Select.Option>
                        <Select.Option value="fal">失败</Select.Option>
                      </Select>
                    )}                 
                  </FormItem>
                </Col>
                <Col span={3}>
                  <FormItem>
                    {getFieldDecorator('postponeMethod', {
                      rules: [{ required: true, message: 'Please input your postponeMethod!' }],
                    })(
                      <Select placeholder="展期方式" style={{ color: 'rgba(0,0,0,.25)', width: '200px' }}>
                        <Select.Option value="repaying">用户展期</Select.Option>
                        <Select.Option value="working">客服展期</Select.Option>
                      </Select>
                    )}                  
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </div>
          <div className="info-table">
            <Table size="small" className="loan-table" rowClassName={this.setRowClassName} pagination={ pagination } bordered dataSource={data}>
              <Column title='序号' align='center' dataIndex='number' width='50' />
              <Column title='姓名' align='center' dataIndex='name' width='50' />
              <Column title='手机号' align='center' dataIndex='phone' width='80' />
              <Column title='展期次数' align='center' dataIndex='postponeCount' width='50' />
              <Column title='展期时间' align='center' dataIndex='postponeDate' width='90' />
              <Column title='展期周期' align='center' dataIndex='postponeCycle' width='120' />
              <Column title='展期手续费' align='center' dataIndex='postponeMoney' width='60' />
              <Column title='展期服务费' align='center' dataIndex='postponeServe' width='60' />
              <Column title='展期方式' align='center' dataIndex='postponeMethod' width='60' />
              <Column title='操作人员' align='center' dataIndex='operator' width='60' />
              <Column title='状态' align='center' dataIndex='status' width='70' 
                render={status => (
                  <span>
                    {status.map(status => <Tag color="green" key={status}>{status}</Tag>)}
                  </span>
                )} />
              <Column title='操作' align='center' dataIndex='cz' width='70' 
                render={cz => (
                  <span>
                    <Button size="small" disabled key={cz}>查询</Button>
                  </span>
                )} />
            </Table>
          </div>
          <div className="postpone">
            <span className="postpone-money">展期手续费: 
              <span className="postpone-money-sum">70</span>
            </span>
            <span className="postpone-serve">展期服务费: 
              <span className="postpone-serve-sum">1400</span>
            </span>
          </div>
        </div>
      </LocaleProvider>  
		);
	}
}

const extensionForm = Form.create()(Extension);

export default extensionForm;